<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>


    <style type="text/css">


        #contents {
            min-height: 550px;
          /*  background: lightsalmon;*/
        }

        h1 {
            text-align: center;
        }

        .img1 {
            border-radius:15px 15px;
            /*background: #E05B49;*/
            background:url("/images/te.png");
            text-align: center;
            height: 230px;

        }

        .img2, .img4 {
            border-radius:15px 15px;
            background: #f6bc40;
            text-align: center;
            height: 230px;
        }

        .img3 {
            border-radius:15px 15px;
            background: #1FA4B6;
            text-align: center;
            height: 230px;
        }

        .img5 {
            border-radius:15px 15px;
            background: #f6bc40;
            text-align: center;
            height: 230px;
        }

        .img6 {
            border-radius:15px 15px;
            background: #f6bc40;
            text-align: center;
            height: 230px;
        }

        div[class*="row"] {
            padding: 7px 5px;
        }

        .webMain {
            background-color:rgba(0,0,0,0.8);opacity:0; /* margin-top:0px; */ width:100%; height:100%;
            border-radius:15px 15px;

        }
        a{
            text-align:center;
        }
        a:hover{
            text-decoration: none;
        }
        .w{
            display:block;
            padding-top:85px;
            font-size:300%;
            font-weight:bold;
        }

        #te {
            width:970px;
            height:230px;
        }
    </style>



<!-- contents -->
<div id="contents" class="row">
    <div class="row">
        <div class="img1 span12">
            <div class="webMain" style="opacity:0; color:white;">
                <span class="w"><a href="sing.jsp" style="color:white;">sing</a></span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="img2 span3">
            <div class="webMain" style="opacity:0;">
                <span class="w"><a href="#" style="color:white;">song</a></span>
            </div>
        </div>
        <div class="img3 span6">
            <div class="webMain" style="opacity:0;">
                <span class="w"><a href="#" style="color:white;">contest</a></span>
            </div>
        </div>
        <div class="img4 span3">
            <div class="webMain" style="opacity:0;">
                <span class="w"><a href="#" style="color:white;">notice</a></span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="img5 span4">
            <div class="webMain" style="opacity:0;">
                <span class="w"><a href="#" style="color:white;">event</a></span>
            </div>
        </div>
        <div class="img6 span8">
            <div class="webMain" style="opacity:0;">
                <span class="w"><a href="#" style="color:white;">ranking</a></span>
            </div>
        </div>
    </div>

</div>



<script src="js/project.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
    $('.webMain').hover(function () {
        $(this).animate({opacity: '1'});
    }, function () {
        $(this).animate({opacity: '0'});
    });
</script>